<template>
  <view class="uni-tab">
    <scroll-view
      class="uni-header uni-header-sticky scroll-box border border-bottom bcl-white"
      scroll-x
      :scroll-into-view="'current_' + (currentIndex - 1)"
      scroll-with-animation
    >
      <view class="container-cate text-center" v-if="tabTitle && tabTitle.length">
        <view
          class="cate"
          v-for="(item, index) in tabTitle"
          :key="index"
          :id="'current_' + index"
          :class="{'cl-main bold' : currentIndex === index && !hasActiveBorder, 'active-bottom cl-black bold': currentIndex === index && hasActiveBorder}"
          @tap="change(index, item)"
        >
          <view class="f-14 hide-text-1">{{item.name || item}}</view>
        </view>
      </view>
    </scroll-view>

    <!-- 内容插槽 -->
    <view class="content-container">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "uniTab",

  data() {
    return {
      currentIndex: 0
    };
  },

  props: {
    /**
     * 表头数据
     * @type: 可传入索引值数组 如 ['全部', '分类一', '分类二'] 或 传入对象数组 [{ id: 1, name: '全部'}]
     */
    tabTitle: {
      type: Array,
      default: () => []
    },

    hasActiveBorder: {
      type: Boolean,
      default: false
    }
  },
  mounted(){
    console.log(this.$route.query.currentIndex)
    // this.currentIndex =1
  },

  methods: {
    /**
     * @methods: change 改变当前tab index
     * @remark: 向外发射索引值及当前点击的对象
     */
    change(index, item) {
      this.currentIndex = index;
      this.$emit("change", { index, item });
    }
  }
};
</script>

<style scoped lang="scss">
.uni-tab {
  .scroll-box {
    .container-cate {
      height: 90upx;
      line-height: 90upx;
      white-space: nowrap;

      .cate {
        padding: 0 30upx;
        text-align: center;
        display: inline-block;
        position: relative;
        transition: all 0.2s ease;

        &.active-bottom::before {
          content: "";
          width: 30upx;
          height: 6upx;
          background: $color-main;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 8upx;
        }
      }

      .name {
        width: 100%;
      }
    }
  }
}
</style>
